<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <v-app>
      <!-- 顶部导航 -->
      <v-app-bar app fixed hide-on-scroll flat>
        <div class="d-flex align-center justify-space-between" style="width: 100%;">
          <div class="d-flex  align-center">
            <v-icon class="blue--text">mdi-pizza</v-icon>
            <div class="font-weight-black">好一好</div>
          </div>
          <div>
            <v-icon class="mr-5">mdi-credit-card-scan-outline</v-icon>
            <v-icon>mdi-clipboard-text-outline</v-icon>
            </v-div>
          </div>
        </div>

        <template v-slot:extension>
          <v-sheet width="100%" height="30" style="border-radius: 30px;"
            class="d-flex justify-space-around align-center grey lighten-2">
            <div class="d-flex align-center">
              <v-icon small>mdi-magnify</v-icon>
              <div class="caption grey--text  darken-2">半价尝鲜 减配送费</div>
            </div>
          </v-sheet>
        </template>
      </v-app-bar>

      <v-content>

        <!-- 轮播图 -->
        <v-carousel cycle class="ma-2 " :show-arrows='false' hide-delimiters height="100" style="width: 96%;">
          <v-carousel-item v-for='item in list' :key="item.id">
            <v-img :src='item.path' height="100" width="90vw"></v-img>
          </v-carousel-item>
        </v-carousel>

        <!-- 选项列表 -->
        <div class="d-flex align-center mt-4">
          <div class="d-flex flex-column align-center" v-for='item in list1' :key="item.id" style="width: 25%;">
            <v-avatar size="40"><img :src="item.path" alt=""></v-avatar>
            <div class="caption black--text">{{item.name}}</div>
          </div>
        </div>
        <div class="d-flex align-center mt-4  flex-wrap">
          <div class="d-flex flex-column align-center mb-2" v-for='item in list2' :key="item.id" style="width: 20%;">
            <v-avatar size="20"><img :src="item.path" alt=""></v-avatar>
            <div class="caption black--text">{{item.name}}</div>
          </div>
        </div>

        <!-- 红包 -->
        <div class="amber lighten-2 ma-2" style="width: 96%; height: 150px;border-radius: 10px;">
          <div class=" pa-3 font-weight-black  deep-orange--text darken-4" style="font-size: small;">老朋友专享限时福利</div>
          <div class="d-flex justify-space-between align-center pl-2 pr-2">
            <v-img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4064976365,3916026037&fm=26&gp=0.jpg'
              width="38vw" height="100" class="mr-2"></v-img>
            <v-img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4064976365,3916026037&fm=26&gp=0.jpg'
              width="38vw" height="100"></v-img>
          </div>
        </div>

        <!-- 优惠专区 -->
        <div class="font-weight-black ma-3">优惠专区</div>

        <div class="d-flex justify-space-between align-center ma-3">
          <v-img src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3902878166,1688557728&fm=26&gp=0.jpg'
            width="47%" height='120' style="border-radius: 10px;" class="mr-1 d-flex justify-space-between ">
            <div
              style="text-align: center;width: 60%; height: 20px;border-radius: 5px; position: absolute; left: 20%;font-size: small;"
              class="deep-orange accent-3 white--text">限时秒杀</div>
            <div
              style="position: absolute; bottom: 0; width: 90%; height: 50px;border-radius: 5px;text-align: center;font-size: small;"
              class="white ma-2 font-weight-black pt-2">下午餐9.9起</div>
          </v-img>

          <v-img src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3902878166,1688557728&fm=26&gp=0.jpg'
            width="47%" height='120' style="border-radius: 10px;">
            <div
              style="text-align: center;width: 60%; height: 20px;border-radius: 5px; position: absolute; left: 20%;font-size: small;"
              class="light-blue accent-3 white--text">午后时光</div>
          </v-img>
        </div>

        <!-- 轮播 -->
        <v-carousel class="ma-4" style="max-width: 97%;" height="200" :show-arrows='false' hide-delimiters cycle>
          <v-carousel-item style="max-width: 96%;" v-for='item in list5'>
            <v-img :src='item.path' style="border-radius: 10px;"
              gradient="to top right, rgba(0,0,0,0.3),rgba(0,0,0,0.3)" height="200">
              <div style="background-color: black;border-radius: 5px;width: 20%;text-align: center;"
                class="amber--text accent-4 caption">{{item.name}}</div>
                <v-img :src='item.path4' width="45" height="45" style="position: absolute;top: 10%;left: 5%;"></v-img>

              <div class="white--text " style="margin-left: 20%;">{{item.name1}}</div>

              <div style="width: 100%; height: 150px;position: absolute;bottom: 0;border-radius: 10px;">
                <div class="d-flex align-center " style="margin-left: 20%;">
                  <div style="font-size: x-small;" class="red white--text font-weight-light mr-1">{{item.name2}}</div>
                  <div style="font-size: x-small;" class="red white--text font-weight-light mr-1">{{item.name3}}</div>
                  <div style="font-size: x-small;" class="red white--text font-weight-light mr-1 ">{{item.name4}}</div>
                </div>

                <div class="d-flex align-center justify-space-between ma-2">
                  <v-card class="grey lighten-2 " style="width: 32%; ">
                    <v-img :src='item.path1' style="width: 100%;height: 80px;"></v-img>
                    <div class="black--text caption">{{item.name5}}</div>
                    <div class="red--text caption">{{item.name6}}</div>
                  </v-card>
                  <v-card class="grey lighten-2" style="width: 32%; ">
                    <v-img :src='item.path2' style="width: 100%;height: 80px;"></v-img>
                    <div class="black--text caption">{{item.name7}}</div>
                    <div class="red--text caption">{{item.name8}}</div>
                  </v-card>
                  <v-card class="grey lighten-2" style="width: 32%; ">
                    <v-img :src='item.path5' style="width: 100%;height: 80px;"></v-img>
                    <div class="black--text caption">{{item.name9}}</div>
                    <div class="red--text caption">{{item.name10}}</div>
                  </v-card>
                </div>
                  
                

              </div>
            </v-img>
          </v-carousel-item>
        </v-carousel>

        <!-- 选项 -->
        <!-- <v-toolbar>
          
        </v-toolbar> -->
        <div>
          <div>
            <v-tabs class="mt-5"height="30" show-arrows>
            <v-tab>推荐</v-tab>
            <v-tab>发现好菜</v-tab>
            <v-tab>果蔬商超</v-tab>
            <v-tab>到店自取</v-tab>
          </v-tabs>
          </div>
          
          <v-tabs class="mt-2"  height="40" show-arrows>
            <v-tab style="font-size: small;" @click='show = true'>综合排序</v-tab>
            <v-tab style="font-size: small;">距离</v-tab>
            <v-tab style="font-size: small;">销量</v-tab>
            <v-tab style="font-size: small;">筛选</v-tab>
          </v-tabs>

          <div class="ma-3 d-flex justify-space-between align-center">
            <div style="width: 23%; height:25px; border-radius: 5px;background-color: lightgrey;font-size: x-small;"
              class="d-flex justify-space-around align-center">津贴优惠</div>
            <div style="width: 23%; height:25px; border-radius: 5px;background-color: lightgrey;font-size: x-small;"
              class="d-flex justify-space-around align-center">会员领红包</div>
            <div style="width: 23%; height:25px; border-radius: 5px;background-color: lightgrey;font-size: x-small;"
              class="d-flex justify-space-around align-center">满减优惠</div>
            <div style="width: 23%; height:25px; border-radius: 5px;background-color: lightgrey;font-size: x-small;"
              class="d-flex justify-space-around align-center">品质联盟</div>
          </div>
        </div>

        <!-- 综合排序侧栏导航 -->
        <v-navigation-drawer app v-model='show'>
          1
        </v-navigation-drawer>


        <!-- 店铺列表 -->
        <v-sheet height="120" width="100%" class="d-flex mr-2" v-for='item in list4'>
          <v-img :src='item.path' max-width="20vw" height="70" style="border-radius: 5px;" class="ml-2 mr-2"></v-img>

          <v-sheet width="70%">
            <div class="font-weight-black ">{{item.name}}</div>
            <div class="d-flex align-center">
              <div class="caption red--text mr-1">{{item.name1}}</div>
              <div class="caption">{{item.name2}}</div>
            </div>
            <div class="d-flex justify-space-between align-center">
              <div class="d-flex align-center">
                <div class="caption mr-1">{{item.name3}}</div>
                <div class="caption">{{item.name4}}</div>
              </div>
              <div class="d-flex align-center">
                <div class="caption mr-1">{{item.name5}}</div>
                <div class="caption">{{item.name6}}</div>
              </div>
            </div>
            <div class="d-flex align-center ">
              <div style="background-color: #FBE9E7;" class="  caption deep-orange--text accent-3 mr-1">"{{item.name7}}"
              </div>
              <div style="background-color: #FBE9E7;" class="  caption deep-orange--text accent-3">{{item.name8}}</div>
            </div>

            <div class="d-flex align-center ">
              <div style="border: 1px solid orangered;" class="red--text caption mr-1">{{item.name9}}</div>
              <div style="border: 1px solid orangered;" class="red--text caption mr-1">{{item.name10}}</div>
              <div style="border: 1px solid orangered;" class="red--text caption mr-1 ">{{item.name11}}</div>
            </div>
          </v-sheet>
        </v-sheet>


        <!-- 底部导航 -->
        <v-bottom-navigation class="justify-space-between" fixed>
          <div v-for='(item,index) in list3' style="width: 25%;" class="d-flex flex-column align-center"
            @click='handle(index)'>
            <div v-if='curr == index'>
              <div class="caption cyan--text">{{item.name1}}</div>
              <v-icon class="cyan--text">{{item.name}}</v-icon>
            </div>
            <div v-else>
              <div class="caption">{{item.name1}}</div>
              <v-icon>{{item.name}}</v-icon>
            </div>

          </div>
        </v-bottom-navigation>
      </v-content>
    </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data() {
        return {
          curr: 0,
          show: false,
          list5: [{
              path: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1366203184,4215313860&fm=26&gp=0.jpg',
              path1: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3176225048,2621778197&fm=26&gp=0.jpg',
              path2: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2872655295,4239309730&fm=26&gp=0.jpg',
              path3: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3535432203,2357681787&fm=26&gp=0.jpg',
              path4: 'http://img1.imgtn.bdimg.com/it/u=842485785,1046386666&fm=26&gp=0.jpg',
              path5: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1624040822,509601401&fm=26&gp=0.jpg',
              name: '优享大牌',
              name1: '麦当劳',
              name2: '满25减10',
              name3: '满25减10',
              name4: '满25减10',
              name5: '香辣鸡腿',
              name6: '￥8.8起',
              name7: '藤椒鸡排(孜然味)',
              name8: '￥11.1',
              name9: '香辣鸡腿堡套餐',
              name10: '￥38.9',
            },
            {
              path: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1366203184,4215313860&fm=26&gp=0.jpg',
              path1: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3176225048,2621778197&fm=26&gp=0.jpg',
              path2: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2872655295,4239309730&fm=26&gp=0.jpg',
              path3: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3535432203,2357681787&fm=26&gp=0.jpg',
              path4: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3077618435,4275309645&fm=26&gp=0.jpg',
              path5: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2165306184,1554074764&fm=26&gp=0.jpg',
              name: '优享大牌',
              name1: '正新鸡排',
              name2: '满25减10',
              name3: '满25减10',
              name4: '满25减10',
              name5: '正新鸡排',
              name6: '￥19.8',
              name7: '藤椒鸡排(孜然味)',
              name8: '￥11.1',
              name9: '香辣鸡排',
              name10: '￥38.9',
            },
            {
              path: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1366203184,4215313860&fm=26&gp=0.jpg',
              path1: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3176225048,2621778197&fm=26&gp=0.jpg',
              path2: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2872655295,4239309730&fm=26&gp=0.jpg',
              path3: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3535432203,2357681787&fm=26&gp=0.jpg',
              path4: 'http://img1.imgtn.bdimg.com/it/u=842485785,1046386666&fm=26&gp=0.jpg',
              path5: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1624040822,509601401&fm=26&gp=0.jpg',
              name: '优享大牌',
              name1: '正新鸡排',
              name2: '满25减10',
              name3: '满25减10',
              name4: '满25减10',
              name5: '香辣鸡腿',
              name6: '￥8.8起',
              name7: '藤椒鸡排(孜然味)',
              name8: '￥11.1',
              name9: '香辣鸡腿堡套餐',
              name10: '￥38.9',
            },
          ],
          list4: [{
              path: 'http://img1.imgtn.bdimg.com/it/u=842485785,1046386666&fm=26&gp=0.jpg',
              name: '麦当劳',
              name1: '4.7',
              name2: '月售720',
              name3: '起送￥0',
              name4: '配送￥9',
              name5: '28分钟',
              name6: '502m',
              name7: '餐点味道好，包装仔细，新鲜',
              name8: '新鲜',
              name9: '品质联盟',
              name10: '5元特惠',
              name11: '开发票',
            },
            {
              path: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3960116954,2132952135&fm=15&gp=0.jpg',
              name: '烧鸭饭',
              name1: '4.7',
              name2: '月售720',
              name3: '起送￥0',
              name4: '配送￥9',
              name5: '28分钟',
              name6: '502m',
              name7: '烧鸭味道美味，推荐',
              name9: '品质联盟',
              name10: '满减',

            },
            {
              path: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3221099735,2026351614&fm=26&gp=0.jpg',
              name: '快乐番薯',
              name1: '4.7',
              name2: '月售720',
              name3: '起送￥0',
              name4: '配送￥9',
              name5: '28分钟',
              name6: '502m',
              name7: '餐点味道好，包装仔细，新鲜',
              name8: '新鲜',
              name9: '品质联盟',
              name10: '5元特惠',
              name11: '开发票',
            },
            {
              path: 'http://img1.imgtn.bdimg.com/it/u=842485785,1046386666&fm=26&gp=0.jpg',
              name: '麦当劳',
              name1: '4.7',
              name2: '月售720',
              name3: '起送￥0',
              name4: '配送￥9',
              name5: '28分钟',
              name6: '502m',
              name7: '餐点味道好，包装仔细，新鲜',
              name8: '新鲜',
              name9: '品质联盟',
              name10: '5元特惠',
              name11: '开发票',
            },
          ],
          list3: [{
              id: 1,
              name: 'mdi-alpha-e-circle-outline',
              name1: '外卖',
            },
            {
              id: 2,
              name: 'mdi-wifi-strength-1',
              name1: '生活',
            },
            {
              id: 3,
              name: 'mdi-calendar-text-outline',
              name1: '订单',
            },
            {
              id: 4,
              name: 'mdi-account-outline',
              name1: '我的',
            },
          ],
          list2: [{
              name: '下午茶',
              path: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4121936296,1394652343&fm=26&gp=0.jpg',
            },
            {
              name: '汉堡披萨',
              path: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=276727470,2643993871&fm=26&gp=0.jpg',
            },
            {
              name: '新店尝鲜',
              path: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2382588732,2747302213&fm=26&gp=0.jpg',
            },
            {
              name: '买菜',
              path: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1909262643,800586003&fm=26&gp=0.jpg',
            },
            {
              name: '送药上门',
              path: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3339315699,2673333166&fm=26&gp=0.jpg',
            },
            {
              name: '星选好店',
              path: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1053334307,1463860215&fm=26&gp=0.jpg',
            },
            {
              name: '大牌惠吃',
              path: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2490884645,1872600356&fm=26&gp=0.jpg',
            },
            {
              name: '打卡领红包',
              path: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4198935442,40692208&fm=26&gp=0.jpg',
            },
            {
              name: '炸鸡炸串',
              path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=544597108,2966942263&fm=15&gp=0.jpg',
            },
            {
              name: '全部分类',
              path: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3709188896,3555962561&fm=26&gp=0.jpg',
            },
          ],
          list1: [{
              name: '美食',
              path: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2200976445,622189273&fm=26&gp=0.jpg',
            },
            {
              name: '商超便利',
              path: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3748466316,3530687238&fm=26&gp=0.jpg',
            },
            {
              name: '水果',
              path: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1990878480,68356573&fm=26&gp=0.jpg',
            },
            {
              name: '跑腿代购',
              path: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3388975307,2522263653&fm=26&gp=0.jpg',
            },
            {
              name: '甜品饮品',
              path: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4121936296,1394652343&fm=26&gp=0.jpg',
            },
          ],
          list: [{
              path: 'http://img0.imgtn.bdimg.com/it/u=1703242866,2369958534&fm=26&gp=0.jpg',
            },
            {
              path: 'http://img0.imgtn.bdimg.com/it/u=1703242866,2369958534&fm=26&gp=0.jpg',
            },
            {
              path: 'http://img0.imgtn.bdimg.com/it/u=1703242866,2369958534&fm=26&gp=0.jpg',
            },
            {
              path: 'http://img0.imgtn.bdimg.com/it/u=1703242866,2369958534&fm=26&gp=0.jpg',
            },
            {
              path: 'http://img0.imgtn.bdimg.com/it/u=1703242866,2369958534&fm=26&gp=0.jpg',
            },
          ],
        }
      },
      methods: {
        handle(index) {
          this.curr = index
        }
      },
    })
  </script>
</body>

</html>